<template>
	<view class="">
		<view class="bgs xbgf">
			<view class="info xbs xflex-x-between xbb8D">
				<button class="xbutton xflex-x-between" open-type='chooseAvatar' @chooseavatar="onChooseAvatar" style="width: 100%;">
					<view class="xflex-x xflex1">
						<image class="avatar xmr12" :src="userdata.data.avatar" mode=""></image>
						<view class="label">
							头像
						</view>
					</view>
					<!-- <image class="jt" src="/static/image/mine/jt3.png" mode=""></image> -->
				</button>
			</view>

			<view class="wb xflex-x-between xbb8D">
				<view class="xflex-x">

					<view class="label">
						昵称
					</view>
				</view>
				<view class="xflex-x">
					<view class="bz xmr32">
						<!-- {{userdata.data.nickname?userdata.data.nickname:''}} -->
						<input v-model="userdata.data.nickname" type="nickname" @change="getNickname" placeholder="请输入您的昵称" style="text-align: right;" />
					</view>
					
					
					<image class="jt" src="/static/image/mine/jt3.png" mode=""></image>
				</view>
			</view>

			<view class="wb xflex-x-between xbb8D">
				<view class="xflex-x">

					<view class="label">
						用户ID
					</view>
				</view>
				<view class="xflex-x">
					<view class="bz xmr32">
						{{userdata.data.id?userdata.data.id:''}}
					</view>
					<image class="jt" src="/static/image/mine/jt3.png" mode=""></image>
				</view>
			</view>

			<view class="wb xflex-x-between xbb8D">
				<view class="xflex-x">

					<view class="label">
						手机号
					</view>
				</view>
				<button class="xbutton" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
					<view class="xflex-x">
						<view class="bz xmr32">
							{{userdata.data.mobile?userdata.data.mobile:''}}
						</view>
						<image class="jt" src="/static/image/mine/jt3.png" mode=""></image>
					</view>
				</button>
			</view>

			<view class="wb xflex-x-between xbb8D">
				<view class="xflex-x">

					<view class="label">
						注册时间
					</view>
				</view>
				<view class="xflex-x">
					<view class="bz xmr32">
						{{userdata.data.createtime?userdata.data.createtime:''}}
					</view>
					<image class="jt" src="/static/image/mine/jt3.png" mode=""></image>
				</view>
			</view>
		</view>


		<view class="bgs xbgf xmt12">


			<view class="wb xflex-x-between xbb8D">
				<view class="xflex-x">

					<view class="label">
						语言
					</view>
				</view>
				<view class="xflex-x">
					<view class="bz xmr32">
						简体中文
					</view>
					<image class="jt" src="/static/image/mine/jt3.png" mode=""></image>
				</view>
			</view>

			<view class="wb xflex-x-between xbb8D">
				<view class="xflex-x">

					<view class="label">
						开通城市
					</view>
				</view>
				<view class="xflex-x">
					<view class="bz xmr32">
						{{userdata.data.city?userdata.data.city:''}}
					</view>
					<image class="jt" src="/static/image/mine/jt3.png" mode=""></image>
				</view>
			</view>

			<view class="wb xflex-x-between xbb8D">
				<view class="xflex-x">

					<view class="label">
						距离单位
					</view>
				</view>
				<view class="xflex-x">
					<view class="bz xmr32">
						{{userdata.data.distance?userdata.data.distance:''}}
					</view>
					<image class="jt" src="/static/image/mine/jt3.png" mode=""></image>
				</view>
			</view>

			<view class="wb xflex-x-between xbb8D">
				<view class="xflex-x">

					<view class="label">
						货币单位
					</view>
				</view>
				<view class="xflex-x">
					<view class="bz xmr32">
						{{userdata.data.currency?userdata.data.currency:''}}
					</view>
					<image class="jt" src="/static/image/mine/jt3.png" mode=""></image>
				</view>
			</view>
		</view>
		
		
		
		<view class="exit" @click="exit()">
			退出登录
		</view>


	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from "vue"
	import {
		userInfo,
		uploadFile,
		setuserinfo,
		authmobile
	} from "../../../network/home.js"
	// 获取个人信息
	
	
	const onChooseAvatar = (e) =>{
		console.log(e.target.avatarUrl);
		
		uploadFile(e.target.avatarUrl).then(res=>{
			console.log(res);
			
			setuserinfo({
				avatar:res.data.url
			}).then(res=>{
				userInfo().then(res => {
					console.log(res);
					userdata.data = res.data
					uni.showToast({
						icon:"修改成功"
					})
				})
			})
		})
	}
	
	const getNickname = (e) =>{
		console.log(e.detail.value);
		
		setuserinfo({
			nickname:e.detail.value
		}).then(res=>{
			userInfo().then(res => {
				console.log(res);
				userdata.data = res.data
				uni.showToast({
					icon:"修改成功"
				})
			})
		})
		
		
	}
	
	const decryptPhoneNumber = (e) =>{
		console.log(e.detail.code);
		
		authmobile({
			code:e.detail.code
		}).then(res=>{
			userInfo().then(res => {
				userdata.data = res.data
			})
		})
	}
	

	let userdata = reactive({
		data: ''
	})
	userInfo().then(res => {
		console.log(res);
		userdata.data = res.data
	})
	
	const exit = () =>{
		uni.clearStorage()
		uni.reLaunch({
			url:'/pages/index/login'
		})
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		background: #2F2F2F;
		border-radius: 60rpx;
	}

	.label {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}

	.jt {
		width: 24rpx;
		height: 24rpx;
	}

	.info {
		padding: 40rpx 38rpx;
		
		box-sizing: border-box;
	}

	.wb {
		padding: 47rpx 40rpx;
	}

	.bz {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
	}
	
	.exit {
		width: 340rpx;
		height: 68rpx;
		border-radius: 5rpx;
		border: 2px solid #CCCCCC;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		line-height: 68rpx;
		margin: auto;
		margin-top: 51rpx;
	}
	
	.bgs {
		margin: 30rpx 20rpx;
		border-radius: 24rpx;
	}
</style>